<html ng-app="app">
<head>
    <meta charset="utf-8" >
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <title>游戏战绩（我参与的）</title>
    <script type="text/javascript" src="<?php echo $image_url;?>files/js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="<?php echo $image_url;?>files/js/fastclick.js"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js" ></script>
    <script type="text/javascript" src="<?php echo $image_url;?>files/js/vue.min.js" ></script>
    <script type="text/javascript" src="<?php echo $image_url;?>files/js/vue-resource.min.js" ></script>
    <script type="text/javascript" src="<?php echo $image_url;?>files/js/angular.min.js"></script>
    <link rel="stylesheet" type="text/css" href="<?php echo $image_url;?>files/css/bull_vue-1.0.0.css">
    <link rel="stylesheet" type="text/css" href="<?php echo $image_url;?>files/css/bullalert.css">
    <link rel="stylesheet" type="text/css" href="<?php echo $image_url;?>files/css/bullshop.css">

    <script type="text/javascript">
	$(function() {  
		FastClick.attach(document.body);  
	});

    var baseUr="<?php echo $base_url;?>";

    var app = angular.module('app',[])
    app.controller("myCtrl", function($scope,$http) {
        $scope.width = window.innerWidth;
        $scope.height = window.innerHeight;
        $scope.baseURL = '<?php echo $base_url;?>';

        $scope.game_type = 52;
        $scope.page = 0;
        $scope.rows = 10;

        $(".main").show();
        $("#loading").hide();
        $scope.getScore = function () {
            $http({
                url:$scope.baseURL + 'ay/rSo',
                method:'POST',
                header:{'Content-Type':'application/x-www-form-urlencoded'},
                data:{
                    'game_type':$scope.game_type,
                    'page' : $scope.page,
                    'rows' : $scope.rows
                }})
                .success(function (data, header, config, status) {
                    console.log(data);
                    //请求成功页面加1
                    $scope.outTotalPage = data.sum_page;
                    $scope.outPage = $scope.outPage + 1;
                    var htm="";
                    $.each(data.data,function(i,e){
                        var unixTimestamp = new Date(e.game_time*1000) ;
                        //var roomIds = 10000+parseInt(e.room_id) ;
                        htm+="<div class='item' onclick='myRoomScore("+e.room_id+","+$scope.game_type+","+e.room_number+")'>"
                        htm+="<div class='itembox'>"+ e.room_number+"</div>"
                        htm+="<div class='itembox' style='width:39%'>"+unixTimestamp.toLocaleString()+"</div>"
                        htm+="<div class='itembox'>"+e.score+"</div>"
                        htm+="</div>"
                    })
                    $("#j_roomRecordList").html(htm);
                }).error( function (data, header, config, status) {
                    console.log(data);
                });
        }

        $scope.getScore();

        $scope.getRoomList = function(type,o){
            $(".cus-ul li span").removeClass("on");
            $(".cus-ul li").eq(o).children("span").addClass("on");
            // $scope.game_type = type;
            // $("#j_roomRecordList").html("");
            // $scope.page = 0 ;
            // $scope.outTotalPage = 0;
            // $scope.pageIndex = 1;
            // $scope.getScore();

            // $("#j_selectType").find("a").removeClass("on");
            // $("#j_select"+type).addClass("on");
            $scope.game_type = type;
            $scope.getScore();
        }
    });

    function myRoomScore(roomId,gameType,roomNumber)
    {
        //console.log(roomId,gameType);
        window.location.href = baseUr + "ay/myMroom?roomId="+roomId+"&gameType="+gameType+"&roomNumber="+roomNumber;
    }

    Date.prototype.toLocaleString = function() {
        return (this.getMonth() + 1) + "-" + this.getDate()+" "+this.getHours()+":"+this.getMinutes()  ;
    };

</script>
    <link rel="stylesheet" href="<?php echo $image_url;?>files/js/swiper/css/swiper.min.css">
    <style type="text/css">
        html, body{height: 100%;font-family: "微软雅黑";}
        *{margin: 0;padding: 0;box-sizing: border-box;}
        a {color: #428bca;text-decoration: none;}
        a:hover,a:focus {color: #2a6496;text-decoration: underline;}
        a:focus {outline: thin dotted;outline: 5px auto -webkit-focus-ring-color;outline-offset: -2px;}

        .padd_40{padding-top: 0px;background: #F5F5F5;overflow-x:hidden;}
        .a{text-align:center;line-height: 40px;position: fixed;top: 0;left: 0;width: 100%;z-index: 10;border-bottom: 1px #ccc solid; background: #f50;color: #fff;}
        .tab{display: flex;line-height: 40px;position: fixed;top: 40px;width: 100%;z-index: 10;border-bottom: 1px #ccc solid;}
        .tab a{width: 33.333333%;background: #fff;text-align: center;}
        .tab .active{border-bottom: 1px #f50 solid; color: #f50;}
        .panel{margin: 0;}

        .refreshtip {position: absolute;left: 0;width: 100%;margin: 10px 0;text-align: center;color: #999;}
        .swiper-container{overflow: visible;}
        .loadtip { display: block;width: 100%;line-height: 8vh; height: 18vh;text-align: center;color: #999;border-top: 0px solid #ddd;}
        .swiper-container, .w{height: calc(72vh - 0px);}
        .swiper-slide{height: auto;}

        .text-center{text-align: center;}
        .list-group{padding-left: 0;margin-bottom: 20px;}
        .list-group-item{ float:left; margin-top:10px; width:100vw; padding:1.5vh 1vw; margin-bottom: -1px;background-color: #fff;border: 1px solid #ddd;}
        .list-group-item:first-child {border-top-left-radius: 4px;border-top-right-radius: 4px;}

        html,body {
            height:100%;padding:0px; margin:0px;
        }
        html {
            overflow:hidden;
        }
        * {
            padding:0;
            margin:0;
        }
        li {
            list-style:none;
        }
        .img img {
            width:100%;
            display:block;
        }
        #header {
            margin-bottom:50px;
            height:100%; background-color:#0e0226;
        }
        #header .slidepage {
            height:100%;
        }
        .scroll {
            height:100%;
        }
        content-scroll{
            height:100%;
        }
        .slidescroll {
            height:auto;
        }
        .customcss{
            width:auto;
        }
        .customcss ul{
            width:auto;
        }
        .customcss ul li{
            width:16vh; height:16vh; float:left; text-align:center;
        }
        .customcss ul li span{
            width:14vh; height:14vh; margin:1vh; float:left;
            filter:alpha(opacity=50); /*支持 IE 浏览器*/
            -moz-opacity:0.50; /*支持 FireFox 浏览器*/
            opacity:0.50;  /*支持 Chrome, Opera, Safari 等浏览器*/
        }
        .customcss ul li span.on{
            filter:alpha(opacity=100); /*支持 IE 浏览器*/
            -moz-opacity:1; /*支持 FireFox 浏览器*/
            opacity:1;  /*支持 Chrome, Opera, Safari 等浏览器*/
        }

        .text-customcss ul{
            width:90vw; padding:0 5vw;
        }
        .text-customcss ul li{
            width:50%; float:left; text-align:center;
        }
        .text-customcss ul li span{
            width:100%; height:42vw; float:left;
        }
    </style>
<style type="text/css">
	 .gameItem{position: absolute;background-color: #291c4d;}
     .item{width:100%;height:40px;background-color:rgba(255, 165, 0, 0.42);margin-top:5px;}
     .itembox{float:left;width:30%;height:40px;line-height:40px;color:#fff;text-align:center;}
     .selecttype a{ filter:alpha(opacity=40);-moz-opacity:0.4; opacity:0.4;}
     .selecttype a.on{ filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0;}
 </style>
</head>

<body style="background-color: #0e0226"  ng-controller="myCtrl">

	<div id="loading" style="position: fixed;width:100%;height:100%;top:0;left:0;background: #000" >
		<img src="<?php echo $image_url;?>files/images/loading.gif" style="top: 40%;position: absolute;left: 50%;margin-left: -45px;margin-top: -45px;" />
	</div>
    <div style="height:16vh;overflow:hidden;">
        <div class="swiper-container" id="header">
            <div class="swiper-wrapper">
                <div class="swiper-slide slidepage">
                    <div class="swiper-container scroll">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide slidescroll customcss">
                                <ul class="cus-ul">
                                    <li><span ng-click="getRoomList(52,0)" class="on" style="background:url(<?php echo $image_url;?>/files/images/ay/douniu_12.png) no-repeat 50% 50% / 14vh 14vh"></span></li>
                                    <li><span ng-click="getRoomList(53,1)" style="background:url(<?php echo $image_url;?>/files/images/ay/douniu_lai.png) no-repeat 50% 50% / 14vh 14vh"></span></li>
                                    <li><span ng-click="getRoomList(56,2)" style="background:url(<?php echo $image_url;?>/files/images/ay/douniu_10.png) no-repeat 50% 50% / 14vh 14vh"></span></li>
                                    <li><span ng-click="getRoomList(58,3)" style="background:url(<?php echo $image_url;?>/files/images/ay/douniu_98.png) no-repeat 50% 50% / 14vh 14vh"></span></li>
                                    <li><span ng-click="getRoomList(59,4)" style="background:url(<?php echo $image_url;?>/files/images/ay/douniu_9.png) no-repeat 50% 50% / 14vh 14vh"></span></li>
                                    <li><span ng-click="getRoomList(55,5)" style="background:url(<?php echo $image_url;?>/files/images/ay/douniu_6.png) no-repeat 50% 50% / 14vh 14vh"></span></li>

                                    <li><span ng-click="getRoomList(30,6)" style="background:url(<?php echo $image_url;?>/files/images/ay/zhajinhua_12.png) no-repeat 50% 50% / 14vh 14vh"></span></li>
                                    <li><span ng-click="getRoomList(29,7)" style="background:url(<?php echo $image_url;?>/files/images/ay/zhajinhua_9.png) no-repeat 50% 50% / 14vh 14vh"></span></li>
                                    <li><span ng-click="getRoomList(26,8)" style="background:url(<?php echo $image_url;?>/files/images/ay/zhajinhua_6.png) no-repeat 50% 50% / 14vh 14vh"></span></li>
                                    <li><span ng-click="getRoomList(25,9)" style="background:url(<?php echo $image_url;?>/files/images/ay/zhajinhua_xz.png) no-repeat 50% 50% / 14vh 14vh"></span></li>
                                    <li><span ng-click="getRoomList(24,10)" style="background:url(<?php echo $image_url;?>/files/images/ay/zhajinhua_mp.png) no-repeat 50% 50% / 14vh 14vh"></span></li>

                                    <li><span ng-click="getRoomList(3,11)" style="background:url(<?php echo $image_url;?>/files/images/ay/sangong.png) no-repeat 50% 50% / 14vh 14vh"></span></li>
                                    <li><span ng-click="getRoomList(22,12)" style="background:url(<?php echo $image_url;?>/files/images/ay/sangong_9.png) no-repeat 50% 50% / 14vh 14vh"></span></li>

                                    <li><span ng-click="getRoomList(19,13)" style="background:url(<?php echo $image_url;?>/files/images/ay/paijiu.png) no-repeat 50% 50% / 14vh 14vh"></span></li>
                                    <li><span ng-click="getRoomList(20,14)" style="background:url(<?php echo $image_url;?>/files/images/ay/dachixiao.png) no-repeat 50% 50% / 14vh 14vh"></span></li>
                                    <li><span ng-click="getRoomList(8,15)" style="background:url(<?php echo $image_url;?>/files/images/ay/erbagan.png) no-repeat 50% 50% / 14vh 14vh"></span></li>
                                    <li><span ng-click="getRoomList(6,16)" style="background:url(<?php echo $image_url;?>/files/images/ay/majiang.png) no-repeat 50% 50% / 14vh 14vh"></span></li>
                                    <li><span ng-click="getRoomList(2,17)" style="background:url(<?php echo $image_url;?>/files/images/ay/doudizhu.png) no-repeat 50% 50% / 14vh 14vh"></span></li>
                                    <li><span ng-click="getRoomList(21,18)" style="background:url(<?php echo $image_url;?>/files/images/ay/yuxiaxie.png) no-repeat 50% 50% / 14vh 14vh"></span></li>

                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
	<div class="main" id="app-main" style="position: relative; width: 100%;margin: 0 auto; background: #0e0226; ">

        <div style="margin-top:0px;">
            <div style="width:100%;height:40px;">
                <div style="float:left;width:30%;height:40px;line-height:40px;color:#fff;text-align:center;">房间号</div>
                <div style="float:left;width:39%;height:40px;line-height:40px;color:#fff;text-align:center;">结束时间</div>
                <div style="float:left;width:30%;height:40px;line-height:40px;color:#fff;text-align:center;">当局积分</div>
            </div>
            <div style="width:100%;" id="j_roomRecordList">

            </div>
        </div>

	</div>

</body>

<!--<script type="text/javascript" src="<?php /*echo $image_url;*/?>files/js/roomcard/roomcard_vue-2.0.5.js"></script>-->
<script src="<?php echo $image_url;?>files/js/swiper/js/swiper.min.js"></script>
<script src="<?php echo $image_url;?>/files/js/scroll/JsRender.js"></script>
<script>
    //内容滚动
    var headerScrollSwiper = new Swiper('.scroll', {
        //65是头部的高
        //36是top地址和搜索的高
        slidesOffsetBefore: 10,
        slidesOffsetAfter: 10,
        //direction: 'vertical',
        freeMode: true,
        slidesPerView: 'auto',
    });
    //document.addEventListener('touchmove', function(e){e.preventDefault()}, false);
</script>
</html>
